<template lang="html">
    <div
      class="x-bar"
      :id="chartId"
      :option='option'
      >
      </div>
</template>

<script>
import {formatNum} from '../../../util/tool'
export default {
  props : {
    chartId : {
      type : String,
    },
    title : {
      type : String,
    },
    options : {
      type : Object,
    }
  },
  data(){
    return {
      chart : '',
      option: {
        grid: {
          left: '4%',
          right: '16%',
          top : '20%',
          bottom: '0%',
          containLabel: true
        },
        tooltip : {
          show : true,
          trigger: 'axis',
          showContent : false
        },
        legend: {
          data: ['网上逃犯比中','重点人员比中'],
          textStyle: {
            color: '#fff'
          },
          orient: 'vertical',
          right: 10,
          top: 20,
          bottom: 20,
        },
        xAxis: {
          type: 'category',
          name: this.options.xName,
          data: this.options.xData,
          nameTextStyle: {
            color: '#fff',
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
              fontSize : '12'
            },
          },
          axisLine : {
            show : true,
            lineStyle : {
              color : '#0678c6'
            },
          }
        },
        yAxis: {
          type: 'value',
          name: '(数量/人)',
          nameTextStyle : {
            color : '#fff',
            fontSize : 10,
            padding : [0,0,-4,30]
          },
          axisLine : {
            show : true,
            lineStyle : {
                color : '#0678c6'
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
                color: '#fff',
                fontSize : '12'
            },
          },
          axisTick : {
            show:false,
            alignWithLabel: true
          },
          splitLine : {
            show : true,
            lineStyle: {
              color: '#0678c6'
            }
          }
        },
        series: [
          {
            data: this.options.line1,
            type: 'line',
            name: '网上逃犯比中',
            color: '#16fb93',
            lineStyle: {
              normal: {
                color: '#16fb93',
                width: 2,
                type: 'solid'
              }
            },
            itemStyle: {
              normal: {
                color: '#16fb93',
                borderWidth: 2,
                borderColor: '#16fb93'
              }
            },
            emphasis : {
              itemStyle : {
                color: '#ffa729',
                borderColor: '#ffa729'
              },
              label : {
                show : true,
                color : '#fff600'
              },
            },
          },
          {
            data: this.options.line2,
            type: 'line',
            name: '重点人员比中',
            lineStyle: {
              normal: {
                color: '#749ee7',
                width: 2,
                type: 'solid'
              }
            },
            itemStyle: {
              normal: {
                color: '#749ee7',
                borderWidth: 2,
                borderColor: '#fff'
              }
            },
            emphasis : {
              itemStyle : {
                color: '#ffa729',
                borderColor: '#ffa729'
              },
              label : {
                show : true,
                color : '#fff600'
              },
            }
          },
        ]
      }
    }
  },
  watch : {
    options: {
      handler(newVal, oldVal) {
        if (this.chart) {
          if (newVal) {
            this.option.xAxis.name = newVal.xName;
            this.option.xAxis.data = newVal.xData;
            this.option.series[0].data = newVal.line1;
            this.option.series[1].data = newVal.line2;
            this.chart.setOption(this.option);
          } else {
            this.chart.setOption(this.option);
          }
        } else {
            this.init();
        }
      },
      deep: true
    }
  },
  methods : {
    init() {
      // console.log(this.options);
      this.chart = this.$echarts.init(document.getElementById(this.chartId));
      this.chart.setOption(this.option);
      window.addEventListener("resize", this.chart.resize);
    }
  },
  mounted(){
    this.init();
  }
}
</script>

<style lang="scss" scoped>
  .x-bar {
    width: 100%;
    height: 45%;
  }
</style>
